<template>
	<div class="Home">
		<app-header actived="home">
			<div class="Home-header-warpper">
				<div class="Home-header-local" @click="showPicker()">
					<div class="local-icon">
						<span class="iconfont icon-icon104"></span>
					</div>
					<div class="local-name">{{localName}}</div>
				</div>
				<div class="Home-header-search">
					<div class="search-icon">
						<span class="iconfont icon-sousuo"></span>
					</div>
					<div class="search-input">
						<input type="text" placeholder="搜索食材、菜品" />
					</div>
				</div>
				<div class="Home-header-news">
					<span class="iconfont icon-xiaoxi"></span>
				</div>
			</div>
		</app-header>
		<div class="Home-warpper">
			<scroll 
				class="Home-content" 
				ref="scroll" 
				:data="onlyFoods"
				:pullDownRefresh="pullDownRefreshObj"
				:pullUpLoad="pullUpLoadObj"
				@pullingDown="pullingDown"
				@pullingUp="pullingUp">
				<div>

					<!--轮播-->
					<div class="Home-slider" v-if="sliderImgs.length">
						<div class="slider-content">
							<slider>
								<div v-for="item in sliderImgs">
									<a :href="item.linkUrl">
										<img class="needsclick" :src="item.goodSliderImage | serverPicUrl">
										<div class="slider-imgDesc">{{item.goodName}}</div>
									</a>
								</div>
							</slider>
						</div>
					</div>

					<!--兔抢购-->
					<div class="Home-panicBuy">
						<div class="panicBuy-header">兔抢购</div>
						<div class="panicBuy-warpper">
							<div class="panicBuy-content">
								<div class="panicBuy-item" v-for="item in panicBuyGoods">
									<div class="panicBuy-item-header">{{item.goodName}}</div>
									<div class="panicBuy-item-desc">
										<div class="panicBuy-item-time">{{item.goodPanicTime | panicBuyTime}}</div>
										<div class="panicBuy-item-price">&yen;{{item.goodPrice}}</div>
									</div>
									<div class="panicBuy-item-img">
										<img :src="item.goodImage | serverPicUrl" />
									</div>
								</div>
							</div>
						</div>
					</div>

					<!--所有单品-->
					<div class="Home-onlyFoods">
						<div class="onlyFoods-header">单品精选</div>
						<ul class="onlyFoods-content">
							<li class="onlyFoods-detail" v-for="item in onlyFoods">
								<div class="detail-img">
									<img :src="item.goodImage | serverPicUrl" />
								</div>
								<div class="detail-content">
									<div class="detail-name">{{item.goodName}}</div>
									<div class="detail-praise">
										<span>月售：{{item.goodBuyNum}}&nbsp;</span>
										<span>好评率：{{item.goodPraise}}</span>
									</div>
									<div class="detail-price">&yen;{{item.goodPrice}}</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</scroll>
		</div>

		<app-footer actived="Home"></app-footer>
		
		<city-picker 
			ref="city-picker"
			title="当前位置"
			confirmTxt="保存"
			cancelTxt="取消"
			:data="provinceList"
			@select="changeCityPicker"></city-picker>
	</div>
</template>

<script>
	import Scroll from 'base/Scroll/Scroll.vue';
	import Slider from 'base/Slider/Slider.vue';
	import CityPicker from 'base/City-picker/City-picker.vue';
	import AppHeader from 'base/App-header/App-header.vue';
	import AppFooter from 'base/App-footer/App-footer.vue';
	import { ERR_OK, SERVER_IP } from 'api/config.js';
	import { getFoodGoodsSlider, getOnlyGoodsPanicBuy, getOnlyGoods } from 'api/Home.js';
	import { provinceList, cityList, areaList } from 'common/js/areaData.js';

	export default {
		created() {
			this.provinceList = [provinceList, cityList, areaList];
			this.page = 1;
			this.pageSize = 5;
			this.pullDownRefreshObj = {
				threshold: 90,
        stop: 40,
        txt: '刷新成功'
			};
			this.pullUpLoadObj = {
				threshold: 0,
				txt: {
					more: '加载更多', 
					noMore: '没有更多单品可加载了'
        }
			};
			
			this._getFoodGoodsSlider();

			this._getOnlyGoodsPanicBuy();

			this._getOnlyGoods(true);
		},
		activated() {
			setTimeout(() => {
				this.$refs.slider && this.$refs.slider.refresh();
			}, 20)
		},
		computed: {
			localName() {
				return this.localItems[this.localItems.length - 1];
			}
		},
		data() {
			return {
				localItems: ['佛山'],
				sliderImgs: [],
				panicBuyGoods: [],
				onlyFoods: [],
				canPullDown: true,
				canPullUp: true
			}
		},
		filters: {
			serverPicUrl(str) {
				return `${SERVER_IP}/image${str}`;
			},
			panicBuyTime(str) {
				let time = Number(str);
				let hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				let minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
				let seconds = (time % (1000 * 60)) / 1000;

				hours = hours < 10 ? `0${hours}` : hours;
				minutes = minutes < 10 ? `0${minutes}` : minutes;
				seconds = seconds < 10 ? `0${seconds}` : seconds;

				return `${hours}:${minutes}:${seconds}`;
			}
		},
		methods: {
			changeCityPicker(data) {
				this.localItems = data.selectInfo;
			},
			showPicker() {
				this.$refs['city-picker'].show();
			},
			pullingDown() {
				if (!this.canPullDown) {
					return;
				}
				this._getOnlyGoodsPanicBuy();
			},
			pullingUp() {
				if (!this.canPullUp) {
					return;
				}
				
				this.page++;
				this.canPullUp = false;
				this._getOnlyGoods();
			},
			_getFoodGoodsSlider() {
				getFoodGoodsSlider()
					.then(res => {
						if(res.code === ERR_OK) {
							this.sliderImgs = res.result;
						}
					})
			},
			_getOnlyGoodsPanicBuy() {
				getOnlyGoodsPanicBuy()
					.then(res => {
						if(res.code === ERR_OK) {
							this.panicBuyGoods = res.result;
							
							if(this.panicBuyInterval) {
								clearInterval(this.panicBuyInterval);
							}
							
							this.panicBuyInterval = setInterval(() => {
								this.panicBuyGoods.map(item => {
									item.goodPanicTime = Number(item.goodPanicTime) - 1000;
								})
							}, 1000)
						}
						this.$refs.scroll.forceUpdate();
						this.canPullDown = true;
					})
			},
			_getOnlyGoods(isInit) {
				getOnlyGoods(this.page, this.pageSize)
					.then(res => {
						if(res.code === ERR_OK) {
							if(isInit) {
								this.onlyFoods = res.result;
							} else {
								this.onlyFoods = [...this.onlyFoods, ...res.result];
								if(res.result.length === 0) {
									this.$refs.scroll.forceUpdate();
								}
							}
						}
						this.canPullUp = true;
					})
			}
		},
		components: {
			'scroll': Scroll,
			'slider': Slider,
			'city-picker': CityPicker,
			'app-header': AppHeader,
			'app-footer': AppFooter,
			'scroll': Scroll
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';
	$color-title: rgb(106, 180, 57);
	.Home {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		.Home-header-warpper {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			.Home-header-local {
				width: 65px;
				height: 40px;
				line-height: 40px;
				color: white;
				display: flex;
				align-items: center;
				margin-right: 5px;
				.local-icon {
					flex: 0 0 20px;
				}
				.local-name {
					flex: 1;
					font-size: 14px;
					text-align: left;
					padding-left: 2px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.Home-header-search {
				flex: 1;
				position: relative;
				color: rgb(153, 136, 107);
				.search-icon {
					position: absolute;
					left: 10px;
					top: 4px;
				}
				.search-input {
					/*margin-left: 40px;*/
					input::-webkit-input-placeholder {
						color: rgb(153, 136, 107);
					}
					>input {
						width: 100%;
						height: 25px;
						border: none;
						background-color: $color-default;
						background-image: url(./img/header-input.png);
						background-size: 100% 100%;
						color: rgb(153, 136, 107);
						font-size: 12px;
						padding-left: 30px;
						padding-right: 10px;
						box-sizing: border-box;
					}
				}
			}
			.Home-header-news {
				width: 40px;
				color: white;
				>.iconfont {
					font-size: 18px;
				}
			}
		}
		.Home-warpper {
			position: fixed;
			left: 0;
			right: 0;
			top: 40px;
			bottom: 40px;
			overflow: hidden;
			.Home-content {
				width: 100%;
				height: 100%;
				background-color: rgb(235, 234, 228);
				overflow: hidden;
				.Home-slider {
					width: 100%;
					height: 0;
					padding-top: 40%;
					overflow: hidden;
					position: relative;
					.slider-content {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						.slider-imgDesc {
							border: 2px solid white;
							border-radius: 5px;
							padding: 5px;
							color: white;
							font-weight: 700;
							font-size: 14px;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate3D(-50%, -50%, 0);
						}
					}
				}
				.Home-panicBuy {
					width: 100%;
					background-color: white;
					margin-top: 10px;
					padding: 0 10px 5px;
					box-sizing: border-box;
					.panicBuy-header {
						height: 30px;
						line-height: 30px;
						font-size: 14px;
						color: $color-title;
						text-align: left;
						font-family: "微软雅黑";
					}
					.panicBuy-warpper {
						width: 100%;
						height: 0;
						padding-top: 40%;
						overflow: hidden;
						position: relative;
						.panicBuy-content {
							width: 100%;
							height: 100%;
							display: flex;
							position: absolute;
							top: 0;
							left: 0;
							.panicBuy-item {
								flex: 1;
								height: 100%;
								box-sizing: border-box;
								.panicBuy-item-header {
									height: 20px;
									line-height: 20px;
									font-size: 12px;
									color: gray;
									text-align: left;
								}
								.panicBuy-item-desc {
									height: 20px;
									line-height: 20px;
									display: flex;
									align-content: center;
									font-size: 14px;
									>div {
										flex: 1;
									}
									.panicBuy-item-time {
										text-align: left;
										color: black;
									}
									.panicBuy-item-price {
										text-align: right;
										color: red;
									}
								}
								.panicBuy-item-img {
									width: 100%;
									height: calc(100% - 40px);
									>img {
										width: 100%;
										height: 100%;
									}
								}
							}
							.panicBuy-item:nth-of-type(1) {
								margin-right: 10px;
							}
						}
					}
				}
				.Home-onlyFoods {
					width: 100%;
					margin-top: 10px;
					padding: 0 10px 5px;
					box-sizing: border-box;
					background-color: white;
					.onlyFoods-header {
						width: 100%;
						height: 30px;
						line-height: 30px;
						font-size: 14px;
						color: $color-title;
						text-align: left;
						font-family: "微软雅黑";
					}
					.onlyFoods-content {
						width: 100%;
						.onlyFoods-detail {
							width: 100%;
							text-align: left;
							font-size: 12px;
							margin-top: 10px;
							padding-bottom: 10px;
							border-bottom: 1px solid lightgray;
							display: flex;
							align-items: center;
							.detail-img {
								flex: 0 0 67px;
								>img {
									width: 100%;
								}
							}
							.detail-content {
								flex: 1;
								padding-left: 10px;
								.detail-name {
									font-size: 14px;
								}
								.detail-praise {
									color: gray;
									margin: 5px 0;
								}
								.detail-price {
									color: red;
								}
							}
						}
						.onlyFoods-detail:nth-last-of-type(1) {
							border: none;
						}
					}
				}
				.Home-loading {
					padding: 10px 0;
					color: gray;
					font-size: 12px;
				}
			}
		}
	}
</style>